<#include "../../module/macro.ftl">
<@head title="随机头像"></@head>
<#include "../../module/sidebar.ftl">
<div class="main">
    <link href="/anatole/source/plugins/prism/prism.css" type="text/css" rel="stylesheet" />
    <#include "../../module/page-top.ftl">
    <div class="autopagerize_page_element">
        <div class="content ">
            <div class="post-page">
                <div class="post animated fadeInDown">
                    <div class="post-title">
                        <h3>
                            <span>随机生成头像</span>
                        </h3>
                    </div>
                    <div class="post-content">
                   
                     <div class="form-group">
                          <label for="menuName">类型</label>
                          <select id="d">
                    		<option value="monsterid" selected="selected">小怪物</option>
                    		<option value="identicon">抽象几何图形</option>
                    		<option value="wavatar">组合</option>
                    		<option value="retro">复古</option>
                    	</select>
                     </div>
                     <div class="form-group">
                          <label for="menuName">随机一个数</label>
                    	  <input type="number" class="form-control" value="0" id="s"  name="s">
                     </div>
                     
                    </div>
                    <div class="post-content">
	                    <img id="s_img" style="-webkit-user-select: none;" src="http://www.gravatar.com/avatar/7787?s=300&d=monsterid">
                    </div>
                    <div class="post-footer" style="margin-top: 50px;">
                        <div class="meta">
                            <div class="info">
                                <i class="fa fa-sun-o"></i>
                                <span class="date">2018年9月9日</span>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/anatole/source/plugins/prism/prism.js"></script>
<script type="text/javascript" src="/static/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
	readMenu('工具');
	$('#d').on('change',function(){
		randomHead();
	})
	$('#s').on('change',function(){
		randomHead();
	})
})

function randomHead(){
	var s = $('#s').val();
	var d = $('#d').val();
	$('#s_img').attr('src','http://www.gravatar.com/avatar/'+s+'?s=300&d='+d+'');
}

</script>
<@footer></@footer>
